<template>
	<view :class="[primarySize()]">
		<view class="page-foot ptb30 tc">
			<button hover-class="none" class="remove_btn" @click="clear_search">清除全部历史</button>
		</view>
		<view class="container bg-white">
			<view class="search_fix">
				<view class="search_con flex-box">
					<view class="address_con flex-box flex-center" @click="jumpLoacte">
						<image :src="iconPath('icon_address.png')" mode="widthFix"
							class="ico25"></image>
							
						<view class="fwb fs24 col2 m-ellipsis">{{city.name}}</view>
						<image src="@/static/public/arrow_down.png" mode="widthFix" class="ico17 ml10"></image>
						
					</view>
					<input type='text' class="flex-grow-1 fs28 col3 plr20" placeholder-class="cold7" :focus="true"
						placeholder="请输入职位或公司" confirm-type="search" @confirm="search" v-model="keywords"></input>
					<image src="@/static/public/icon_search.png" mode="aspectFit" @click="search"></image>
				</view>
			</view>
			<view class="search_list plr30">
				<view class="fs30 col3">搜索历史</view>
				<view class="clearfix ptb30">
					<view class="history_item" v-for="(item,index) in search_list" @tap="goto" :data-name="item.name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				city: [],
				search_list: [],
				keywords: ''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.talent = options.talent || '';
			var search_list = uni.getStorageSync('home_search_list') || [];
			this.city = this.$core.getCurrentCity();
			this.search_list = search_list
			uni.$on(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange, this);
		},
		onUnload() {
			uni.$off(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange);
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			if (this.refreshOnShow) {
				this.refreshOnShow = false;
				this.refresh();
			}
		},
		methods: {
			jumpLoacte() {
				uni.navigateTo({
					url: '/pages/public/locate'
				})
			},
			eventOnCurrentCityChange(currentCity) {
				this.city = currentCity;
			},
			// 清除全部历史
			clear_search() {
				uni.setStorageSync('home_search_list', []);
				this.search_list = []
			},
			// 搜索
			search() {
				var keywords = this.keywords;
				if (keywords.replace(/(^\s*)|(\s*$)/g, "") == '') {
					uni.showToast({
						title: '请输入要搜索的关键词',
						icon: 'none'
					})
					return false;
				}
				this.save_search_list();
				uni.redirectTo({
					url: '/pages/public/search?talent=' + this.talent + '&keywords=' + keywords,
				})
			},

			// 保存搜索历史
			save_search_list() {
				var keywords = this.keywords;
				if (keywords == '') {
					uni.showToast({
						title: '请输入关键词',
						icon: 'none'
					})
					return false;
				}
				var search_list = this.search_list;
				for (var i = 0; i < search_list.length; i++) {
					if (search_list[i].name == keywords) {
						return;
					}
				}
				search_list.push({
					id: search_list.length + 1,
					name: keywords
				});
				uni.setStorageSync('home_search_list', search_list);
			},
			// 点击搜索历史
			goto(e) {
				var keywords = e.currentTarget.dataset.name;
				uni.redirectTo({
					url: '/pages/public/search?talent=' + this.talent + '&keywords=' + keywords,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 125rpx;
	}

	.search_main {
		background-color: #fff;
		position: relative;
		z-index: 31
	}

	.search_fix {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		z-index: 31
	}

	.search_con {
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.08);
		background-color: #fff;
		border-radius: 85rpx;
		line-height: 85rpx;
		position: relative;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-right: 40rpx;
		z-index: 30
	}

	.search_con image {
		width: 28rpx;
		height: 29rpx;
	}

	.address_con {
		width: 196rpx;
		position: relative
	}

	.address_con::after {
		contain: "";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1rpx;
		height: 27rpx;
		display: block;
		background-color: #000;
		opacity: 0.05
	}

	.search_con input {
		height: 85rpx;
	}

	.history_item {
		font-size: 24rpx;
		color: #666;
		float: left;
		line-height: 44rpx;
		border-radius: 25rpx;
		border: 1rpx solid #E2E2E2;
		padding: 0 20rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
	}

	.search_list {
		padding-top: 30rpx;
	}




	/* 搜索结果 */
	.search_nav {
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		font-weight: bold
	}

	.search_nav view text {
		display: inline-block;
		padding-bottom: 7rpx
	}

	.search_nav view.active text {
		border-bottom: 7rpx solid var(--primary);
		padding-bottom: 0
	}


	.remove_btn {
		display: inline-block;
		line-height: 70rpx;
		height: 72rpx;
		padding: 0 40rpx;
		min-width: 220rpx;
		box-sizing: border-box;
		border: 1rpx solid var(--primary);
		color: var(--primary);
		text-align: center;
		border-radius: 8rpx;
		font-size: 32rpx;
	}

	.none {
		padding-top: 163rpx;
	}

	.none image {
		width: 216rpx;
		height: 225rpx;
		display: block;
		margin: 0 auto
	}

	.none view {
		font-size: 30rpx;
		color: #d2d2d2;
		text-align: center;
		padding-top: 48rpx;
	}
</style>